import React, { Component } from "react";
import {
  Tabs,
  Table,
  Card,
  Switch,
  Button,
  Modal,
  Input,
  Checkbox,
} from "antd";
const { TabPane } = Tabs;
class management extends Component {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    const dataSource = [
      {
        key: "1",
        probe: "WinEE",
        client: "192.168.12.13",
        servicer: "172.16.254.1",
        domain: "weibo.com",
        type: "A",
        address: "203.12.16.3",
        location: "未知",
        degree: "1",
      },
      {
        key: "2",
        probe: "WinEE",
        client: "192.168.12.87",
        servicer: "172.16.254.14",
        domain: "qq.com",
        type: "A",
        address: "203.12.16.3",
        location: "中国台湾",
        degree: "1",
      },
    ];

    const columns = [
      { title: "序号", dataIndex: "key" },
      {
        title: "探针",
        dataIndex: "probe",
      },
      {
        title: "客户端",
        dataIndex: "client",
      },
      {
        title: "DNS服务器",
        dataIndex: "servicer",
      },
      {
        title: "域名",
        dataIndex: "domain",
      },
      {
        title: "查询类型",
        dataIndex: "type",
      },
      {
        title: "解析地址",
        dataIndex: "address",
      },
      {
        title: "地理位置",
        dataIndex: "location",
      },
      {
        title: "解析次数",
        dataIndex: "degree",
      },
    ];
    const columns2 = [
      {
        title: "策略名称",
        dataIndex: "name",
        key: "name",
        render: (text) => <a>{text}</a>,
      },
      {
        title: "域名威胁程度",
        dataIndex: "servers",
        key: "servers",
      },

      {
        title: "策略状态",
        render: () => <Switch />,
      },
      {
        title: "说明",
        dataIndex: "status",
        key: "status",
      },

      {
        title: "操作",
        key: "action",
        render: () => (
          <div>
            <Button type="primary" onClick={this.showModal}>
              编辑
            </Button>
            &nbsp; &nbsp;
            <Button type="primary">操作</Button>
          </div>
        ),
      },
    ];

    const data2 = [
      {
        key: "1",
        name: "test",
        servers: "高",
        status: "恶意域名",
        apply: ["可信", "不可信"],
      },
      {
        key: "2",
        name: "陈冠希",
        servers: "高",
        status: "可疑域名",
        apply: ["可信"],
      },
      {
        key: "3",
        name: "吴彦祖",
        servers: "高",
        status: "恶意下载",
        apply: ["可信", "不可信"],
      },
    ];
    const columns1 = [
      {
        title: "策略名称",
        dataIndex: "name",
        key: "name",
        render: (text) => <a>{text}</a>,
      },
      {
        title: "域名威胁程度",
        dataIndex: "servers",
        key: "servers",
      },

      {
        title: "策略状态",
        render: () => <Switch />,
      },
      {
        title: "说明",
        dataIndex: "status",
        key: "status",
      },

      {
        title: "操作",
        key: "action",
        render: () => (
          <div>
            <Button type="primary" onClick={this.showModal}>
              编辑
            </Button>
            &nbsp; &nbsp;
            <Button type="primary">操作</Button>
          </div>
        ),
      },
    ];

    const data1 = [
      {
        key: "1",
        name: "test",
        servers: "高",
        status: "恶意域名",
        apply: ["可信", "不可信"],
      },
      {
        key: "2",
        name: "陈冠希",
        servers: "高",
        status: "可疑域名",
        apply: ["可信"],
      },
      {
        key: "3",
        name: "吴彦祖",
        servers: "高",
        status: "恶意下载",
        apply: ["可信", "不可信"],
      },
    ];
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: (record) => ({
        disabled: record.name === "Disabled User", // Column configuration not to be checked
        name: record.name,
      }),
    };
    const title = (
      <div>
        <Button type="primary">批量删除</Button>&nbsp;
        <Button type="primary">创建策略</Button>
      </div>
    );
    return (
      <div>
        <Tabs defaultActiveKey="1">
          <TabPane tab="白名单策略" key="1">
            <Card title={title}>
              <Table
                rowSelection={rowSelection}
                columns={columns2}
                dataSource={data2}
              />
            </Card>
          </TabPane>
          <TabPane tab="黑名单策略" key="2">
            <Card title={title}>
              <Table
                rowSelection={rowSelection}
                columns={columns1}
                dataSource={data1}
              />
            </Card>
          </TabPane>
          <TabPane tab="智能策略" key="3">
            <Card>
              <Table dataSource={dataSource} columns={columns} />
            </Card>
          </TabPane>
        </Tabs>
        <Modal
          title="创建策略"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>
            <span>策略名称：</span>
            <Input style={{ width: "250px" }} />
          </p>
          <p>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;IP地址：</span>
            <Input style={{ width: "250px" }} />
          </p>
          <p>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;描述：</span>
            <Input style={{ width: "250px" }} />
          </p>
        </Modal>
      </div>
    );
  }
}

export default management;
